<!--
 * @Date: 2022-01-20 09:27:35
 * @LastEditors: exlimit exlimit@qq.com
 * @LastEditTime: 2022-07-20 23:39:33
 * @FilePath: \earth-manager\src\components\navcon.vue
-->
/**
* 头部菜单
*/
<template>
  <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
    <span class="projectName">地质信息资源管理和辅助决策系统</span>
    <el-submenu index="2" class="submenu">
      <template slot="title">{{ user=='atlas'? user+'(超管)': user+'(教师)'}}</template>
      <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
  export default {
    name: "navcon",
    data() {
      return {
        collapsed: true,
        user: "",
      };
    },
    // 创建完毕状态(里面是操作)
    created() {
      this.user = localStorage.getItem("user");
    },
    methods: {
      // 退出登录
      exit() {
        this.$confirm("退出登录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            localStorage.setItem("token", "");
            localStorage.setItem("user", "")
            localStorage.setItem("group", "")
            this.$store.commit("login", "");
            this.$router.push({ path: "/login" });
            this.$message({
              type: "success",
              message: "已退出登录!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      },
    },
  };
</script>
<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
  }

  .submenu {
    float: right;
  }

  /* .buttonimg {
  height: 60px;
  background-color: transparent;
  border: none;
} */
  /* .showimg {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 17px;
  left: 17px;
}
.showimg:active {
  border: none;
} */
  .projectName {
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    display: inline-block;
    margin-top: 16px;
    margin-left: 24px;
  }
</style>